<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img class="icon" src="imgs/pet-01.jpg">
    <p id="discripe">这张图片真美~</p>
    <button onclick="changeImage();">更改图片</button>
    <button class="hidebutton">隐藏图片</button>


    <script type="text/javascript">
        // document内置对象的作用
        // 1. 可以动态获取网页中所有的标签/节点
        // 2. 可以对获取到的标签进行CRUD(增删改查)
        document.write('HelloWorld');
        document.write('<input type="file">');
        document.write('<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white.png">');

        function changeImage() {
            // 获取网页中的图像标签
            var img1 = document.getElementsByClassName('icon')[0];
            console.log(img1);
            img1.src = 'imgs/pet-02.jpg';
            console.log(img1);
        }


        // 拿到所有要操作的标签, 如果button的click方法在script中实现, 则要将script放在body的尾部, 这样才能获取button
        var image = document.getElementsByTagName('img')[0];
        var p = document.getElementById('discripe');
        var hideButton = document.getElementsByClassName('hidebutton')[0];
        hideButton.onclick = function () {
            if (hideButton.innerText == '隐藏图片') {
                p.style.display = 'none';
                image.style.display = 'none';
                hideButton.innerText = '显示图片';
            } else {
                p.style.display = 'block';
                image.style.display = 'inline-block';
                hideButton.innerText = '隐藏图片';
            }
        }
    </script>
</body>
</html>